<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    
    <script src="js\ajax.js"></script>
    <script src="js\cookie.js"></script>
    <script src="js\jquery-3.1.1.min.js"></script>
    <script src="js\dt.js"></script>
    <script src="js\index.js"></script>
    <script src="js\dj.js"></script>
    <script src="js\json.js"></script>
    <link rel="stylesheet" href="css/index.css">

</head>
<script>
    $(function(){
        $(".xqbj1,.xqbj2,.bj4,.kong,.xqbj3").css("background","#f4f4f4")
    })
</script>
<body>
    <div class="bj1">
        <div class="bj1-box">
            <div class="bj1-box-left">
                <a href="#" class="bb">好的生活，没那么贵</a>
            </div>
            <ul class="bj1-box-right">
                <ul>
                    <li><a href="#" class="bb">登录</a></li>
                    <li><a href="#" class="bb">注册</a></li>
                    <li><a href="#" class="bb">我的订单</a></li>
                    <li><a href="#" class="bb">严选会员</a></li>
                    <li><a href="#" class="bb">企业采购</a></li>
                    <li><a href="#" class="ba">客户服务<i class="sahngxia">︿</i></a>
                        <ol id="sss">
                            <li class="bs"><a href="">帮助中心</a></li>
                            <li class="bs"><a href="">在线客服</a></li>
                            <li class="bs" id="bs"><a href="">电话客服▶</a>
                                <div class="yc">
                                    <a href="#">400-900-555-123</a>
                                </div>
                            </li>
                            <li class="bs"><a href="">商务合作</a></li>
                            <li class="bs"><a href="">开放平台</a></li>
                        </ol>
                    </li>
                    <li><a href="#" class="bb"><i class="xiazaiimg"></i>下载app</a></li>
                </ul>
        </div>
    </div>
    </div>

    <!-- 以上是页面头-->
    <!-- 以下是搜索-->
    <div class="bj2">
        <div class="bj2-box">
            <a href="#"></a>
            <div class="goshpping" style="float:right;">
                <span>0</span>
            </div>
            <div style="float:right;">
                <input type="button" class="bj2-box-button">
            </div>
            <div style="float:right;">
                <input type="text" value="ssss" class="bj2-box-input">
            </div>
        </div>
    </div>
    <div class="bj3">
        <div class="bj3-box">
            <ul style="margin:0 auto;">
                <li><a style="color:#b4a078;border-bottom:3px solid #b4a078;" href="">首页</a></li>
                <li class="ul-li" style="position:relative;background:white"><a href="">居家</a>
                    <ol id="wer" style="position:absolute;width:950px;display:none;z-index:30">
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (1).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">被枕</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (2).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">床品</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (3).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">布艺</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (4).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">收纳</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (5).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">家具</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (6).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">家室</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (7).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">宠物</span></a></li>
                    </ol>
                </li>
                <li class="ul-li" style="position:relative;"><a href="">餐具</a>
                    <ol id="wer" style="position:absolute;width:950px;display:none;left:-60px;z-index:30">
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (1).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">被枕</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (2).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">床品</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (3).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">布艺</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (4).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">收纳</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (5).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">家具</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (6).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">家室</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (7).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">宠物</span></a></li>
                    </ol>
                </li>
                <li class="ul-li" style="position:relative;"><a href="">配件</a>
                    <ol id="wer" style="position:absolute;width:950px;display:none;left:-138px;z-index:30">
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (1).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">被枕</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (2).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">床品</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (3).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">布艺</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (4).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">收纳</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (5).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">家具</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (6).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">家室</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (7).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">宠物</span></a></li>
                    </ol>
                </li>
                <li class="ul-li" style="position:relative;"><a href="">服装</a>
                    <ol id="wer" style="position:absolute;width:950px;display:none;left:-218px;z-index:30">
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (1).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">被枕</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (2).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">床品</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (3).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">布艺</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (4).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">收纳</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (5).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">家具</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (6).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">家室</span></a></li>
                        <li style="margin-left:25px;margin-right:25px;"><a href=""><img style="padding-top:20px;" src="img\3 (7).png"><span style="display:block;text-align:center;padding-top:5px;padding-bottom:10px;">宠物</span></a></li>
                    </ol>
                </li>
                <li><a href="">电器</a></li>
                <li><a href="">洗护</a></li>
                <li><a href="">杂货</a></li>
                <li><a href="">饮食</a></li>
                <li><a href="">婴童</a></li>
                <li><a href="">志趣</a></li>
                <li>|</li>
                <li><a href="">专题</a></li>
                <li><a href="">甄选家</a></li>
            </ul>
        </div>
    </div>
    <!--  -->
    <!-- <div class="xqbj1">
        <div class="xqbj1-box">
            <a href="index.html">首页</a>
            <span>>居家</span>
        </div>
    </div> -->
    
   
    
    <div class="shopping">
        <div class="shopping-box">
            <div class="shopping-top">
                <p><input type="checkbox"><span>全选</span></p>
               
               
               <span>单价</span>
               <span>数量</span>
               <span>小计</span>
               <span>操作</span>
            </div>
            <div class="dongt">
                
            </div>
            <div class="shopping-bottom">
                <p><input type="checkbox"><span>已选</span></p>
                <p>总计:<span>00</span></p>
                <p style="width:50px;height:50px;background:coral;text-align:center;">结算</p>
            </div>
        </div>
    </div>
    <div class="sidebar">
        <div>
            <a href="#"><img src="img\dd.gif"></a>
        </div>
        <div class="sidebar-one">
            <a href="#">
                 <i></i>
                 <p>新人有礼</p>
            </a>
        </div>
        <div class="sidebar-two">
            <a href="#">
                  <i></i>
                  <p>下载app</p>
                </a>
        </div>
        <div class="sidebar-thire">
            <a href="#">
                  <i></i>
                  <p>订阅电子刊</p>
                </a>
        </div>
        <div class="sidebar-for">
            <a href="#">
                  <i></i>
                  <p>在线客服</p>
                </a>
        </div>
        <div class="sidebar-five">
            <a href="#">
                  <i></i>
                  <p>返回顶部</p>
                </a>
        </div>
    </div>
    <!-- <div style="height:2000px;">

    </div>
    <div style="height:20px;background:red;" class="lll">

    </div> -->
    <!-- 以下是页角 -->
    <div class="bj50">
        <div class="bj50-box">
            <div class="bj50-box-left">
                <h4>客服电话</h4>
                <h2>400-900-555-123</h2>
                <h6>9:00-22:00</h6>
                <a href="#">用户反馈</a>
                <a href="#">在线客服</a>
            </div>
            <div class="bj50-box-center">
                <h4>何为严选</h4>
                <h6>网易原创生活类电商品牌，秉承网易一贯的严谨态度，我们深入世界各地，从源头全程严格把控商品生产环节，力求帮消费者甄选到优质的商品</h6>
                <div class="sirc">
                    <a style="font-size:14px;">关注我们:</a>
                    <a class="img-hua"><img src="img\1 (1).png">
                            <div style="left:-40px" class="sirc-img">
                                <img style="padding:10px;box-shadow: -2px 0 5px #ccc,0 -2px 5px #ccc,0 2px 5px #ccc,2px 0 5px #ccc;background: white;" src="img\xx.png">
                            </div>
                        </a>
                    <a class="img-hua"><img src="img\1 (2).png">
                            <div style="left:-40px;" class="sirc-img">
                                <img style="padding:10px;box-shadow: -2px 0 5px #ccc,0 -2px 5px #ccc,0 2px 5px #ccc,2px 0 5px #ccc;background: white;" src="img\xx.png">
                            </div>
                        </a>
                    <a><img src="img\1 (3).png"></a>
                </div>
            </div>
            <div class="bj50-box-right">
                <h4>扫码下载严选APP</h4>
                <img>
                <p>下载领1000元新人礼包</p>
            </div>
        </div>
    </div>
    <div class="bj51">
        <div class="bj51-box">
            <div class="bj51-box-top">

                <div class="bj51-box-top-div"><img src="img\2 (3).png">
                    <p class="bj51-box-top-div-p">30天无忧退换货</p>
                </div>
                <div class="bj51-box-top-div"><img src="img\2 (1).png">
                    <p class="bj51-box-top-div-p">满88元免邮费</p>
                </div>
                <div class="bj51-box-top-div"><img src="img\2 (2).png">
                    <p class="bj51-box-top-div-p">网易品质保证</p>
                </div>
            </div>
            <div class="bj51-box-bottom">
                <ul>
                    <li><a href="#">关于我们</a>

                    </li>
                    <li>|</li>
                    <li><a href="#">帮助中心</a>

                    </li>
                    <li>|</li>
                    <li><a href="#">售后服务</a>

                    </li>
                    <li>|</li>
                    <li><a href="#">配送与验收</a>

                    </li>
                    <li>|</li>
                    <li><a href="#">商务合作</a>

                    </li>
                    <li>|</li>
                    <li><a href="#">企业采购</a>

                    </li>
                    <li>|</li>
                    <li><a href="#">开放平台</a>
                    </li>
                    <li>|</li>
                    <li><a href="#">搜索推荐</a>

                    </li>
                    <li>|</li>
                    <li><a href="#">友情链接</a>

                    </li>
                    <li><a href="#"><img style="width:36px;height:38px;" src="img\jc.gif"></a></li>
                </ul>
                <a style="display: flex;justify-content: center;color:#e9e9e9;font-size: 12px;padding-bottom:20px;">网易公司版权所有 © 1997-2017   食品经营许可证：JY13301080111719</a>
            </div>
        </div>
    </div>
</body>
<script>
    var cyd=1;
    var wocaonima=getCookie("lxshopp");
    var nk="";
    var nice="";
    var id;
    console.log(wocaonima);
    $.ajax("../js/json2.json" ) .then(function(rr){
        var json3 = eval(getCookie("lxshopp"));
        var tgb=rr.name;
        for(var i=0;i<json3.length;i++){
               
nk=`<span style="display:block;width:100px;height:100px;"><img style="display:block;width:100%;height:100px;" src="img/${rr[json3[i].id].img}"></span>
    <span>${rr[json3[i].id].name}</span>
    <div class="shuliang">
                       
                        <p class="shuliang1" style="width:50px;height:50px;line-height: 50px;">-</p>
                        <p class="shuliang2" style="width:50px;height:50px;line-height: 50px;">1</p>
                        <p class="shuliang3" style="width:50px;height:50px;line-height: 50px;">+</p>
                    </div>
    <span class="mongol">${rr[json3[i].id].price}</spaan>
`

        }
        $(".dongt").html(nk);
        
        
                    
                    $(".shuliang3").click(function(){
                        cyd++;
                        $(".shuliang2").html(cyd);
                        var chenyuda=parseInt($(".mongol").html());
                        var chenyu=chenyuda*cyd
                            chenyuda+=chenyuda;
                            $(".mongol").html(chenyuda);
                        
                    })
                    $(".shuliang1").click(function(){

                        
                        cyd--;
                        if (cyd<=1) {
                            cyd=1;
                           
                            console.log(cyd)
                        }
                         $(".shuliang2").html(cyd);
                    })
                    $(".liji").click(function(){
                        window.location.href="goshopping.html"
                        
                    })
    })
    

</script>
</html>